<script setup lang="ts">
  import { ref, watch } from 'vue'

  const props = defineProps({
    modelValue: Boolean,
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
  }>()

  const switchValue = ref(false)

  // 更新事件
  const onChange = () => {
    emits('update:modelValue', switchValue.value)
  }

  watch(
    () => props.modelValue,
    (value) => {
      switchValue.value = value
    },
    { immediate: true },
  )
</script>

<template>
  <div>
    <div class="flex-justify-between">
      <div>设备图片</div>
      <div class="flex-center-5">
        <el-switch @change="onChange" v-model="switchValue" />
        <span v-if="switchValue">显示</span>
        <span v-else>隐藏</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .flex-center-5 {
    display: flex;
    align-items: center;
    gap: 5px;
  }
</style>
